import React, { useEffect, useState } from 'react'
import http from '../../api/http'
import { NavBar } from 'antd-mobile'
import { useSearchParams } from 'react-router-dom'
import { useNavigate } from 'react-router-dom'
import styles from './list.module.css'

function Index() {
    let navigate = useNavigate()
    const [searchParams] = useSearchParams()
    const start = searchParams.get('start')
    const end = searchParams.get('end')
    const date = searchParams.get('date')
    const [list, setList] = useState([])

    // 获取列表
    const fetchList = async () => {
        const res = await http.get('/api/trip/airplane', { params: { start, end } });
        console.log(res.data.data)
        setList(res.data.data)
    }
    useEffect(() => {
        fetchList()
    }, [])
    return (
        <div>
            <NavBar onBack={() => navigate('/home')}>{start} → {end}</NavBar>
            <p style={{ textAlign: 'center' }}>{date}</p>
            <div>
                {
                    list && list.map((item, index) => <div key={index} className={styles.listItem}>
                        <div className={styles.listHeader}>
                            <div className={styles.listLeft}>
                                <div>
                                    <p>{item.dst}</p>
                                    <p>{item.dasn} {item.dat} </p>
                                </div>
                                <div> ---→ </div>
                                <div>
                                    <p>{item.ast}</p>
                                    <p>{item.aasn} {item.aat}</p>
                                </div>
                            </div>
                            <div className={styles.listRight}>￥{item.lps[0].atp}</div>
                        </div>
                        <div className={styles.listFooter}>
                            <span>{item.ss[0].asn}</span> | {''}
                            <span>{item.ss[0].amn}</span>
                        </div>
                    </div>)
                }
            </div>
        </div>
    )
}

export default Index
